<template>
   <el-card class="box-card">
  <div slot="header" class="clearfix">
    <breadcrum>个人管理</breadcrum>
  </div>
  <el-row >
    <el-col :span="16">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="编号">{{form.id}}
        </el-form-item>
        <el-form-item label="手机">{{form.mobile}}
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input  v-model="form.intro"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即修改</el-button>
          </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="8">
      <el-upload
        class="avatar-uploader"
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/photo"
        :headers="headers"
        :http-request="hupload"
         name = 'photo'
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-col>
  </el-row>
</el-card>
</template>

<script>
export default {
  name: 'person',
  data () {
    return {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      },
      imageUrl: '',
      form: {
        id: '',
        mobile: '',
        name: '',
        intro: '',
        email: ''
      }
    }
  },
  methods: {
    async loadperson () {
      try {
        const { name, email, intro } = this.form
        const res = await this.$axios({
          url: '/mp/v1_0/user/profile',
          method: 'get',
          data: {
            name,
            email,
            intro
          }
        })
        console.log('获取个人设置成功', res)
        this.form = res.data.data
        this.imageUrl = res.data.data.photo
      } catch (err) {
        console.log(err)
      }
    },
    handleAvatarSuccess (res, file) {
      console.log('获取用户头像', res)
      // this.imageUrl = URL.createObjectURL(file.raw)
      this.$eventBus.$emit('mod-user', { newPhoto: this.imageUrl })
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async hupload (config) {
      console.log('点击确认时', config)
      try {
        const fd = new FormData()
        fd.append('photo', config.file)
        const res = await this.$axios({
          url: '/mp/v1_0/user/photo',
          method: 'PATCH',
          data: fd
        })
        console.log('上传用户头像', res)
        this.imageUrl = res.data.data.photo
      } catch (err) {
        console.log(err)
      }
    },
    async onSubmit () {
      try {
        const { name, email, intro } = this.form
        const res = await this.$axios({
          url: '/mp/v1_0/user/profile',
          method: 'patch',
          data: {
            name,
            email,
            intro
          }
        })
        console.log('修改个人设置成功', res)
        console.log('修改个人设置成功', name)
        this.$eventBus.$emit('mod-user', { newName: name })
      } catch (err) {
        console.log(err)
      }
    }
  },
  created () {
    this.loadperson()
  }

}
</script>

<style lang = 'less' scoped>
  .avatar-uploader {
    width: 178px;
    height: 178px;
    margin-left: 200px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
